{% extends 'base.html' %}
{% load my_tags %}
{% load static %}

  {% block title %}
  <title>操作日志</title>
  {% endblock title %}

	{% block navheader %}
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-1">
          <div class="col-12">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">日志审计</li>
              <li class="breadcrumb-item active">操作日志</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
	{% endblock navheader %}
	
		  {% block content %}
          <div class="card content-list">
            <div class="card-header">
              <h3 class="card-title">操作日志</h3>
				<div class="card-tools">
				  <!--button type="button" class="btn btn-tool" data-widget="collapse">
					<i class="fas fa-minus"></i>
				  </button>
				  <button type="button" class="btn btn-tool" data-widget="maximize">
				  <i class="fas fa-expand"></i>
                  </button>
				  <button type="button" class="btn btn-tool" data-widget="remove">
					<i class="fas fa-times"></i>
				  </button-->
				</div>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="datatables-lists" class="table table-bordered table-striped">
                <thead>
                <tr>
				  <th>操作人</th>
				  <th>类型</th>
				  <th>详情</th>
				  <th>客户端IP</th>
				  <th>User_Agent</th>
				  <th>事件时间</th>
                </tr>
                </thead>
				
                <!--tbody>
                </tbody-->
				
                <tfoot>
                <tr>
				  <th>操作人</th>
				  <th>类型</th>
				  <th>详情</th>
				  <th>客户端IP</th>
				  <th>User_Agent</th>
				  <th>事件时间</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card --> 
		  {% endblock content %}

{% block js %}
<!-- DataTables -->
<script src="{% static 'adminlte/plugins/datatables/jquery.dataTables.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables/dataTables.bootstrap4.js' %}"></script>
<script>
	// $.fn.dataTable.ext.errMode = 'throw';
	$.fn.dataTable.ext.errMode = function( settings, tn, msg){
		//打印msg，和tn来判断，进了这个方法都是ajax走了error才会到这里来
		console.log(settings);
		console.log(tn);
		console.log(msg);
	};
	$("#datatables-lists").DataTable({
		language: {
			"sProcessing": "加载中...",
			"sLengthMenu": "显示 _MENU_ 项结果",
			"sZeroRecords": "没有匹配结果",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
			"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
			"sInfoPostFix": "",
			"sSearch": "搜索:",
			"sUrl": "",
			"sEmptyTable": "无数据",
			"sLoadingRecords": "载入中...",
			"sInfoThousands": ",",
			"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "上页",
				"sNext": "下页",
				"sLast": "末页"
			},
			"oAria": {
				"sSortAscending": ": 以升序排列此列",
				"sSortDescending": ": 以降序排列此列"
			}
		},
		destroy: true,	// 允许重建
		bProcessing:true,  // 表格数据过多处理时显示: sProcessing
		lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
		order: [],
		 //scrollY: 480,	// 滚动条
		 //scrollCollapse: true,
		 //jQueryUI: true,
		 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
		 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1)
		 
		processing: true,
		serverSide: true,	// 开启服务器端处理模式
		ajax: {
			url: '{% url "user_api:logs" %}',
			type: 'POST',
			data: {
				csrfmiddlewaretoken: '{{ request.COOKIES.csrftoken }}',
			}
		},
	});
</script>
{% endblock js %}